<template>
    <div class="wrap-2 update_6p8_mobile_login update_6p8_mobile_app"  ref="wizwrap">
        <div class="top-box" v-if="!autoLogin">
            <div class="wiz-new-logo"><img :src="logo" alt=""/></div>
            <div class="wiz-new-bg"><img id="imgBg" src="./images/wzb_new_login_bg.png" alt=""/></div>
            <div class="wiz-new-shadow"><img src="./images/wzb_new_login_shadow.png" alt=""/></div>
        </div>
        <div class="own-box-login" v-if="!autoLogin">
            <div class="own-box-area">
                <div class="wiz-box" >
                    <div class="wiz-form">
                        <div class="wiz-email input-box" :style="{'margin-top': windowPlus ? '30px' : '0' }" :class="{'active': userName || userActive, 'error-box': userName == '' && isUserError}">
                            <label for="username">{{ $t("login_user_name") }}</label><!--邮箱或工号-->
                            <input type="text" @focus="userActive = !userActive"  @blur="userActive = !userActive; isUserError = true"  id="username" v-model="userName" name="username" required class="wiz-txt-1" :placeholder="$t('login_pls_name')"/>
                        </div>
                        <div class="wiz-pws input-box" :class="{'active': passActive || password,'error-box': isPassError && !password}">
                            <label for="password">{{ $t("login_password") }}</label><!--密码-->
                            <input type="Password" @focus="passActive = !passActive"  @blur="passActive = !passActive;isPassError = true" id="password" v-model="password" name="password" class="wiz-txt-1" :placeholder="$t('login_pls_password')"/>
                        </div>
                        <div class="wiz-inf login-box binging">
                            <p>{{ $t("btn_binding_info") }}</p>
                            <a style="display:inline-block;color:#fff;text-align:center;" href="javascript:void(0)" class="wiz-btn-1" v-if="!loading" @click='bingWX'>{{ $t("btn_binding") }}</a><!--绑定-->
                            <a style="display:inline-block;color:#fff;text-align:center;" href="javascript:void(0)" class="wiz-btn-2" v-if="loading" >{{ $t("btn_loading") }}</a><!--绑定中-->
                            <img  style="width:25px; line-height:50px; position:absolute; top:12px; left:50%; margin-left: -13px" src=""/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>

<script>
import CommonLoading from '@/components/common/loading';
import DfLogo from './images/wzb_new_logo.png';
import Watermark from '@/libs/watermark.js';
import { encryptFun, randomString } from '@/utils/crypto';
let Base64 = require('js-base64').Base64;
export default {
    //绑定微信
    name: 'binging',
    data() {
        return {
            logo: '',
            userName: '',
            password: '',
            userActive: false,
            passActive: false,
            isUserError: false,
            isPassError: false,
            url: this.$store.getters.getAppUrl,
            isLoading: false,
            autoLogin: false,
            loading: false,
            openId: ''
        };
    },
    components: {CommonLoading},
    created() {
        this.getLoginLogo();
        const logo = window.localStorage.getItem('login-logo');
        if (logo !== null && logo !== undefined && logo !== '') {
            this.logo = logo;
        }
    },
    mounted() {
        this.openId = window.sessionStorage.getItem('openid');
        this.$refs.wizwrap.style.height = window.document.body.clientHeight + 'px';
        if (window.plus) {
            this.windowPlus = true;
        }
    },
    methods: {
        getLoginLogo() {
            this.$axios.get('/app/user/single/userlogin/logo/mobile/LoginPage').then(res => {
                if (res.data && res.data.errMsg) {
                    if (this.logo !== res.data.errMsg) {
                        this.logo = this.appUrl + res.data.errMsg;
                        window.localStorage.setItem('login-logo', this.appUrl + res.data.errMsg);
                    }
                } else {
                    this.logo = DfLogo;
                    window.localStorage.setItem('login-logo', DfLogo);
                }
            });
        },
        bingWX() {
            this.loading = true;
            const key = randomString(16);
            const obj = {
                openid: this.openId,
                userName: this.userName,
                password: key + encryptFun(this.password, key)
            };
            let that = this;
            this.$axios({
                method: 'POST',
                url: '/app/api/user/wechat/bind',
                params: obj
            }).then((res) => {
                this.loading = false;
                let data = res.data;
                switch (data.code) {
                case 200: //登入成功
                    that.$toast(that.$t('btn_binding_success'));
                    let localStorage = window.localStorage;
                    localStorage.setItem('token', data.result.token);
                    localStorage.setItem('loginUser', data.result.usrEntId);
                    localStorage.setItem('wxLogin', 'true');
                    that.$store.commit('setLoginUser', data.result.usrEntId);
                    that.$store.commit('setIsFirstLogin', parseInt(data.result.loginCredit) > 0);
                    that.$store.commit('setLoginCredit', parseInt(data.result.loginCredit));
                    /*是否需要修改密码*/
                    setTimeout(() => {
                        // 登陆成功获取水印
                        window.localStorage.setItem('usrSteUsrId', data.result.userName);
                        this.$axios({
                            method: 'GET',
                            url: '/app/api/system-setting/water-mark',
                            timeout: 1000,
                            headers: {
                                'Content-type': 'application/json'
                            }
                        }).then(res => {
                            let result = res;
                            let waterMark = result.data;
                            if (waterMark.value === 'ON') {
                                Watermark.set(data.result.userName);
                            }
                            window.localStorage.setItem('waterMarkSwitch', waterMark.value);
                        });
                        that.$router.replace({path: '/home'});
                    }, 3000);
                    break;
                default:
                    this.$toast(data.msg);
                    break;
                }
            });
        }
    }
};
</script>

<style scoped>
    .own-box-area{
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .wiz-box{
        height: 100%;
    }
    .wiz-form{
        height: 100%;
    }
    .update_6p8_mobile_login {
        position: relative;
        height: calc(100vh);
        background: #f7f7f7;
        /*display: flex;*/
        /*flex-direction: column;*/
    }
    .update_6p8_mobile_login .top-box {
        width: 100%;
        position: relative;
    }
    .update_6p8_mobile_login .top-box img {
        width: 100%;
    }
    .update_6p8_mobile_login .top-box .wiz-new-shadow {
        width: 100%;
        position: absolute;
        top: 0;
        z-index: 1;
    }
    .update_6p8_mobile_login .top-box .wiz-new-logo {
        width: 100%;
        position: absolute;
        top: 36%;
        z-index: 10;
    }
    .update_6p8_mobile_login .top-box .wiz-new-logo img {
        width: 50%;
        display: block;
        margin: 0 auto;
    }
    .update_6p8_mobile_login input {
        padding: 0;
    }
    .update_6p8_mobile_login input::-webkit-input-placeholder {
        color: #ccc;
    }
    .update_6p8_mobile_login input:-moz-placeholder {
        color: #ccc;
    }
    .update_6p8_mobile_login input::-moz-placeholder {
        color: #ccc;
    }
    .update_6p8_mobile_login input:-ms-input-placeholder {
        color: #ccc;
    }
    .update_6p8_mobile_login input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px #f7f7f7 inset;
    }
    .update_6p8_mobile_login .own-box-login {
        width: auto;
        margin: 30px 30px 25px;
        -webkit-box-flex: 1;
        position: relative;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form {
        width: 100%;
        margin: 0;
        position: relative;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box {
        margin-top: 30px;
        margin-bottom: 0;
        line-height: 1;
        border-bottom: 1px solid #d8d8d8;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box.wiz-pws {
        margin-bottom: 0;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box label {
        position: relative;
        padding-left: 27px;
        color: #000;
        font-size: 12px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box.error-box {
        border-color: #c40202;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box.error-box input::-webkit-input-placeholder {
        color: #c40202;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box.error-box input:-moz-placeholder {
        color: #c40202;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box.error-box input::-moz-placeholder {
        color: #c40202;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box.error-box input:-ms-input-placeholder {
        color: #c40202;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .remember-box {
        margin-top: 20px;
        font-size: 14px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .remember-box a {
        position: relative;
        padding-left: 22px;
        color: rgb(102,102,102);
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box input {
        width: 100%;
        height: 35px;
        padding: 3px 0 0 0;
        font-size: 14px;
        color: rgba(51,51,51,1);
        resize: none;
        border: none;
        background: none;
        outline: none;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box label:before, .update_6p8_mobile_login .own-box-login .wiz-form .remember-box a:before {
        content: '';
        float: left;
        width: 25px;
        height: 25px;
        background: url(./images/wzb_new_login_icon.png) no-repeat;
        background-size: 14px;
        position: absolute;
        top: 50%;
        left: 0;
        margin: -13px 0 0 0;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box.wiz-user label:before {
        background-position: 0 3px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box.wiz-email label:before{
        background-position: 0 -21px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box.wiz-pws label:before {
        background-position: 0 -44px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box.active label {
        color: rgba(153,153,153,1);
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .active.wiz-user label:before {
        background-size: 14px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .wiz-email label:before {
        background-size: 14px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .active.wiz-email label:before {
        background-size: 14px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .active.wiz-pws label:before {
        background-size: 14px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .remember-box .wiz-remember-lose:before {
        background-position: 0 -60px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .remember-box .wiz-remember-good:before {
        background: url(./images/wzb_new_login_icon-cur.png) no-repeat 0 -60px;
        background-size: 13px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .login-box {
        width: 100%;
        /*position: absolute;
        bottom: 0%;*/
        margin-top: 50px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .login-box .wiz-btn-1 {
        width: 100%;
        height: 48px;
        line-height: 48px;
        border-radius: 8px;
        font-size: 18px;
        background-color: #075ebb;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .login-box .wiz-btn-2 {
        width: 100%;
        height: 48px;
        line-height: 48px;
        border-radius: 8px;
        font-size: 18px;
        background-color: #a3a3a3;
    }
    @media screen and (max-height: 580px){
        .update_6p8_mobile_app .own-box-login .wiz-form .input-box {
            margin-top: 15px;
        }
        .update_6p8_mobile_app .own-box-login .wiz-form .input-box input {
            margin-top: -5px;
        }
        .update_6p8_mobile_app .own-box-login .wiz-form .remember-box {
            margin-top: 5px;
        }
    }
    @media screen and (max-height: 500px){
        .update_6p8_mobile_app .own-box-login .wiz-form .input-box {
            margin-top: 10px;
        }
        .update_6p8_mobile_app .own-box-login .wiz-form .input-box input {
            margin-top: -10px;
        }
        .update_6p8_mobile_app .own-box-login .wiz-form .remember-box {
            margin-top: 10px;
        }
    }
    /*弹窗*/
    .update_6p8_alert_new_container {
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 999;
        background-color: rgba(0,0,0,.3);
    }
    .update_6p8_alert_new_container .alert {
        width: 80%;
        margin: 55% auto 0;
        padding: 0;
        background-color: #fff !important;
        opacity: 1;
        border-radius: 20px;
    }
    .update_6p8_alert_new_container .close.new-close {
        float: none;
        position: static;
        display: block;
        width: 100%;
        padding: 20px 0;
        font-size: 24px;
        color: rgb(88,167,244);
        opacity: 1;
    }
    .update_6p8_alert_new_container .content-container {
        padding: 48px 25px;
        border-bottom: 1px solid rgb(230,230,230);
        line-height: 20px;
        font-size: 22px;
        text-align: center;
        color: rgb(26,26,26);
    }
    .update_6p8_mobile_webchat .update_6p8_alert_new_container .alert {
        width: 75%;
    }
    .update_6p8_mobile_webchat .update_6p8_alert_new_container .alert .content-container {
        padding: 21px 26px;
        line-height: 25px;
        font-size: 18px;
        color: #333;
    }
    .update_6p8_mobile_webchat .update_6p8_alert_new_container .alert .content-container .title {
        margin-bottom: 13px;
        font-size: 24px;
        font-weight: bold;
        color: #1a1a1a;
    }
    .update_6p8_mobile_webchat .update_6p8_alert_new_container .alert .close.new-close {
        height: 60px;
        line-height: 1;
        background: transparent;
        -webkit-appearance: none;
    }
    .mm-menu {
        display: none;
    }
    .binging p{
        color: #666;
        font-size: 12px;
        margin-bottom: 1rem;
    }
</style>
